import { View } from "@tarojs/components"
import "./pathway.scss"


interface PathwayProps {
    points: string[],
    index: number
}

const Pathway = (props: PathwayProps) => {


    let children = new Array()
    for (let index = 0; index < props.points.length; index++) {
        let point = props.points[index]

        let classNames = ["pathway-point"]
        if (index == props.index) {
            classNames.push("pathway-point-cur")
        } else if (index < props.index) {
            classNames.push("pathway-point-passed")
        }

        children.push(
            <View className={classNames.join(" ")}>
                <View>{ point }</View>
                <View></View>
            </View>
        )

        children.push(<View className="pathway-line"></View>)
    }
    children.pop()

    return (
        <View className="pathway">
            <View className="payhway-container">
                { children }
            </View>
        </View>
    )
}

export default Pathway